<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿博客</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="sweetAlert/sweetalert.css">
    <link rel="ICON" href="image/icon1.png">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body style="background-color: #f1f1f1">
<header id="header-box">
    <div style="margin-top: 50px;margin-left: 50px">
        <a href="./my_home" title="码猿主页"><img src="./image/projectImage/logo2.png" width="160" height="80" alt=""></a>
    </div>
</header>
<div class="login-modal" id="login_modal">
    <div class="login-header">
        <h1>
            <span class="active-title">修改密码</span>
        </h1>
    </div>
    <div class="login-body m-t-30">
        <div class="clearfix">
            <div class="f-l">
                <div class="input-group">
                    <input v-model="changePass.oldPassword" v-on:blur="my_old" type="password" class="form-control" placeholder="请输入原密码">
                </div>
                <p class="my-tip-wrap color-red">{{formValidation.oldPassword}}</p>
                <div class="input-group">
                    <input v-model="changePass.newPassword" v-on:blur="my_new" type="password" class="form-control" placeholder="请输入新密码">
                </div>
                <p class="my-tip-wrap color-red">{{formValidation.newPassword}}</p>
                <div class="input-group">
                    <input v-model="changePass.rePassword" v-on:blur="my_re"type="password" class="form-control" placeholder="请输入新密码">
                </div>
                <p class="my-tip-wrap color-red">{{formValidation.rePassword}}</p>
                <div class="my-group clearfix">
                    <input type="button" value="保存" class="sign-btn"  v-on:click="change_btn_click">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="sweetAlert/sweetalert.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm_changePass=new Vue({
        el:'#login_modal',
        data:{
            incorrect:false,
            changePass:{
                oldPassword:'',
                newPassword:'',
                rePassword:''
            },
            formValidation:{
                oldPassword:'',
                newPassword:'',
                rePassword:'',
            },
        },
        methods:{
            my_old:function(){
                var oldPassword=this.changePass.oldPassword;
                console.log(oldPassword)
                if(oldPassword=='') {
                    vm_changePass.formValidation.oldPassword = '请输入原密码';
                }else{
                    $.ajax({
                        type:"GET",
                        url:"./verify_old_password",
                        data:"oldPassword="+oldPassword,
                        success:function (data) {
                            console.log(data)
                            if(data){
                                vm_changePass.formValidation.oldPassword='原密码错误';
                            }else{
                                vm_changePass.formValidation.oldPassword='';
                            }
                        }
                    });
                }
            },
            my_new:function(){
                if(this.changePass.newPassword.length<4||this.changePass.newPassword.length>18){
                    this.formValidation.newPassword='请输入正确的4-18位密码';
                }else{
                    this.formValidation.newPassword=''
                }
            },
            my_re:function(){
                if(this.changePass.rePassword!=this.changePass.newPassword){
                    this.formValidation.rePassword='两次的密码不一致';
                }else{
                    this.formValidation.rePassword=''
                }
            },
            change_btn_click:function(){
                if(vm_changePass.changePass.oldPassword=='') {
                    vm_changePass.formValidation.oldPassword = '请输入原密码';
                }
                if(vm_changePass.changePass.newPassword.length<4||vm_changePass.changePass.newPassword.length>18){
                    vm_changePass.formValidation.newPassword='请输入正确的4-18位密码';
                }
                if(vm_changePass.changePass.newPassword==vm_changePass.changePass.oldPassword){
                    vm_changePass.formValidation.newPassword='新密码和原密码相同';
                }
                if(vm_changePass.changePass.rePassword!=vm_changePass.changePass.newPassword){
                    vm_changePass.formValidation.rePassword='两次的密码不一致';
                }
                if(vm_changePass.formValidation.oldPassword==''&&
                    vm_changePass.formValidation.newPassword==''&&
                    vm_changePass.formValidation.rePassword==''){
                    var password=vm_changePass.changePass.newPassword;
                    console.log(password);
                    $.ajax({
                        type:"POST",
                        url:"./update_password",
                        data: 'password='+password,
                        success: function (data) {
                            if(data) {
                                succeed_result("密码修改");
                            } else {
                                fail_result("密码修改", function() {});
                            }
                        },
                        error: function(xhr, status, error) {
                            fail_result("请求服务器", function() {});
                        }
                    });
                }
            }
        }
    });

    //提交数据返回失败的结果后
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新操作",
            type: "error",
            confirmButtonText: "确定",
        }, function(bool) {
            fn();
        });
    }

    //在后端返回处理成功的信息后询问是否要刷新页面
    function succeed_result(operation_name) {
        swal({
            title: operation_name + "成功！",
            text: "请重新验证登录",
            type: "info",
            confirmButtonText: "确定",
        }, function(bool) {
            if(bool) {
                $.ajax({
                    type:"GET",
                    url:"./logout",
                    success:function (data) {
                        if(data){
                            window.location.href='./my_home'
                        }
                    }
                });
            }
        });
    }
</script>
</body>
</html>